<template>
  <div class="popup-image">
    <div
      class="popup-image-item"
      v-for="(item, index) in compData.list"
      :key="item"
      :style="itemStyle(index)"
      @click="currentIndex = index"
    >
      <sa-image :url="item.src" fit="contain" :suffix="null" />
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  const props = defineProps(['compData']);

  const currentIndex = ref(-1);

  function itemStyle(index) {
    return {
      'margin-right': `-${146 + index * 20}px`,
      'margin-bottom': `-${227 + index * 20}px`,
      'z-index': currentIndex.value == index ? 200 : index,
    };
  }
</script>

<style lang="scss" scoped>
  .popup-image {
    height: 100%;
    background: rgb(153, 153, 153);
    // position: relative;
    .popup-image-item {
      width: 292px;
      height: 454px;
      position: absolute;
      right: 50%;
      bottom: 50%;
      margin-right: -146px;
      margin-bottom: -227px;
      border: 1px solid var(--sa-border);
      background: #fff;
      border-radius: 4px;
      .sa-image {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
